<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				离园申请
			</div>
		</my-header>
		<div class="tl cont-nof">
			<div class="weui-navbar">
				<div class="weui-navbar__item " :class="{'weui-bar__item_on':menu===0}" @click="menu=0">
					填写申请
				</div>
				<div class="weui-navbar__item" :class="{'weui-bar__item_on':menu===1}" @click="menuChange(1)">
					申请记录
				</div>
			</div>
			<div class="tl leave-list">
				<div v-if="menu==0" class="max" style="overflow: auto;">
					<div class="weui-cells weui-cells_form" style="margin-top: 0.5rem;">
						<div class="weui-cell weui-cell_select weui-cell_select-after">
							<div class="weui-cell__hd">
								<label class="weui-label"><label style="color: red">*</label> 离园小孩</label>
							</div>
							<div class="weui-cell__bd">
								<select class="weui-select" name="select2" v-model="postData.studentId">
									<option v-for="student in childrenList" :value="student.studentId">{{student.studentName}}</option>
								</select>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label"><label style="color: red">*</label> 离园时间</label>
							</div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="time" v-model="postData.wantLeaveTime" />
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<textarea class="weui-textarea my-textatea" placeholder="请输入离园原因" rows="5" v-model="postData.reason"></textarea>
							</div>
						</div>
					</div>
					<div class="submitBtn">
						<a href="javascript:;" class="weui-btn weui-btn_block weui-btn_primary my-weui-btn" @click="submit">提交</a>
					</div>
				</div>
				<div class="weui-panel__bd" v-else>
					<div class="weui-loadmore weui-loadmore_line" v-if="list.length==0">
						<span class="weui-loadmore__tips">暂无数据</span>
					</div>
					<div class="weui-panel weui-panel_access">
						<div class="weui-panel__bd">
							<div class="weui-media-box weui-media-box_text" v-for="item in list">
								<router-link :to="{path: '/stuApplyDetails',query:item}">
									<h4 class="weui-media-box__title">{{item.studentName}}</h4>
									<p class="weui-media-box__desc">申请时间：{{item.createTime}}</p>
								</router-link>
							</div>
						</div>
						<div class="weui-panel__ft" @click="loadMore" v-if="params.current<params.pages">
							<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
								<div class="weui-cell__bd">查看更多</div>
								<span class="weui-cell__ft"></span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <my-foot tab="/askForApplyList"></my-foot> -->
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	import PullTo from 'vue-pull-to';
	import myFoot from '@/components/Footer.vue'

	export default {
		components: {
			PullTo,
			mySelect,
			myFoot
		},
		data() {
			let time = this.$getNowDate('time');
			return {
				params: {
					current: 1,
					size: 10,
					pages: 0,
					total: 0
				},
				childrenList: [],
				postData: {
					studentId: '',
					wantLeaveTime: time,
					reason: '', //离园原因
				},
				menu: 0,
				list: [],

			}
		},
		methods: {
			menuChange(index) {
				this.menu = index;
				this.fetchOutLeaveApply();
			},
			loadMore() {
				this.params.size += 10;
				this.fetchOutLeaveApply();
			},
			fetchOutLeaveApply() {
				this.$http.fetchOutLeaveApply(this.params).then(resp => {
					let data = resp.data;
					this.list = data.records;
					Object.assign(this.params, {
						current: data.current,
						size: data.size,
						pages: data.pages,
						total: data.total
					});
					this.menu = 1;
				})
			},
			submit() {
				if (this.postData.studentId.length === 0) {
					this.$weui.topTips('选择离园宝贝');
					return;
				}
				if (!this.postData.wantLeaveTime) {
					this.$weui.topTips('离园时间必填');
					return;
				}
				if (!this.postData.reason) {
					this.$weui.topTips('离园原因必填');
					return;
				}
				this.$http.createOutApply(this.postData).then(resp => {
					this.$weui.toast('申请已通知园方');
					Object.assign(this.postData, {
						wantLeaveTime: '',
						reason: '',
					})
				})
			},
			fetchMyStudent() {
				this.$http.fetchMyStudent().then(resp => {
					this.childrenList = resp.data.students;
					if (this.childrenList.length === 1) {
						this.postData.studentId = this.childrenList[0].studentId;
					}
				})
			}
		},
		mounted() {
			this.fetchMyStudent();
		},
	}
</script>

<style scoped>
	.leave-list {
		height: calc(100% - 5.6rem);
		overflow: auto;
	}

	.submitBtn {
		margin: 2rem auto;
		width: 90%;
	}
</style>
